<template>
  <div class="flexContent">
    <GoodsSearch title="品牌" @searchFn="searchFn" @emptyFn="resetFn" />
    <el-button class="addBtn" v-has="'brand_add'" @click="addFn">
      新增
    </el-button>
    <div class="table" id="tableBox"  v-height>
      <div style="flex:1;">
        <vxe-table :column-config="{resizable: true}" border class="tablebox" ref="xTable1" :row-config="{isHover: true}" :scroll-y="{ enabled: true,gt:21 }" align="center" size="medium" style="width: 100%" :row-style="{ height: '30px' }"
        height="100%">
          <vxe-column type="seq" width="80" title="序号" />
          <!-- <vxe-column field="number" title="编号" /> -->
          <vxe-column field="name" title="品牌" min-width="150"/>
          <vxe-column field="remark" title="备注" min-width="150"/>
          <vxe-column title="操作" fixed="right" width="150" v-if="$showFn(['brand_edit', 'brand_del'])">
            <template v-slot="{ row }">
              <el-button type="text" style="margin-right: 10px"
                v-if="row.id != '0417580e779b4d689518af3452712b47'" @click="edit(row)" v-has="'brand_edit'">
                修改
              </el-button>
              <el-button type="text" v-has="'brand_del'" v-if="row.id != '0417580e779b4d689518af3452712b47'"
                style="margin-right: 10px; color: red" @click="$delFn('品牌', del, row)">
                删除
              </el-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="paginationBox">
        <el-pagination :current-page="page.pageNum" background :page-sizes="$pageSizes" :page-size="page.pageSize"
          layout="total,->, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <AddDialog :show-dialog.sync="showDialog" :title="title" @btnOk="btnOk" @close="close">
      <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="70px">
        <el-form-item label="品牌" prop="name">
          <el-input v-clearEmoji v-model="addForm.name" placeholder="请输入..."/>
        </el-form-item>
        <el-form-item label="编号" prop="number">
          <el-input v-clearEmoji v-model="addForm.number" placeholder="请输入..."/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-clearEmoji v-model="addForm.remark" type="textarea" maxlength="100" show-word-limit placeholder="请输入..."/>
        </el-form-item>
      </el-form>
    </AddDialog>
  </div>
</template>

<script>
import {
  brandAdd,
  getBrand,
  delBrand,
  updateBrand,
  searchKeysBrandList
} from '@/api/goods';
import AddDialog from '@/components/Goods/AddDialog';
import GoodsSearch from '@/components/Goods/GoodsSearchPanel';
export default {
  name: 'GoodsBrand',
  components: {
    GoodsSearch,
    AddDialog
  },
  data() {
    return {
      title: '新增',
      sKeywords: '',
      showDialog: false,
      isSearch: false,
      addForm: {
        name: '',
        number: '',
        remark: ''
      },
      id: '',
      brandList: [],
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      addRules: {
        name: [
          {
            required: true,
            message: '品牌名不能为空',
            trigger: 'blur'
          },
          {
            // pattern 正则表达式
            pattern: /^[^\’\<\>\%\&\{\}\￥\@\$\'\"\【\】\\\/\ ]*$/,
            message: '品牌名不能为特殊字符',
            trigger: 'blur'
          }
        ],
        number: [
          {
            min: 0,
            max: 10,
            message: '品牌编号最长为10位',
            trigger: 'blur'
          },
          {
            // pattern 正则表达式
            pattern: /^[^\’\<\>\%\&\{\}\￥\@\$\'\"\【\】\\\/\ ]*$/,
            message: '品牌编号不能为特殊字符',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  created() {
    this.getBrand();
  },
  methods: {
    async getBrand() {
      if (!this.isSearch) {
        this.sKeywords = '';
      }
      const res = await getBrand({ ...this.page, name: this.sKeywords });
      if (res.code === 200) {
        const data = res.data;
        this.brandList = data.list;
        this.page.pageSize = data.pageSize;
        this.page.pageNum = data.pageNum;
        this.page.total = data.total;
        console.log(data);
        const $table = this.$refs.xTable1
        $table.loadData(this.brandList);
        console.log('列表', this.brandList);
      } else {
        // // this.$message.error(res.message);
      }
    },
    resetFn() {
      this.isSearch = false;
      this.sKeywords = '';
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0
      };
      this.getBrand();
    },
    async searchFn(sKeywords) {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0
      };
      this.isSearch = true;
      this.sKeywords = sKeywords;
      this.getBrand();
    },
    // 控制新增弹窗显示
    addFn() {
      this.title = '新增';
      this.showDialog = true;
    },
    btnOk() {
      // console.log('调用新增接口')
      // 校验
      console.log('form', this.addForm);
      this.$refs.addFormRef.validate(async isOK => {
        if (isOK) {
          // 判断是新增还是修改
          if (this.title === '新增') {
            const res = await brandAdd(this.addForm);
            console.log(res);
            if (res.code === 200) {
              this.$message.success('新增成功');
              this.getBrand();
            } else {
              // // this.$message.error(res.message);
            }
          } else if (this.title === '修改') {
            const res = await updateBrand({
              ...this.addForm,
              id: this.id
            });
            if (res.code === 200) {
              this.$message.success('修改成功');
              this.getBrand();
              console.log('修改res', res);
              console.log('修改', this.addForm);
            } else {
              // // this.$message.error(res.message);
            }
          }
          this.addForm.number = '';
          this.addForm.name = '';
          this.addForm.remark = '';
          this.id = '';

          this.showDialog = false;
        } else {
          this.$message.warning('请检查输入信息');
        }
      });
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      console.log(`每页 ${val} 条`);
      // if (this.isSearch) {
      //   this.searchFn();
      // } else {
        this.getBrand();
      // }
    },
    // 获取页数改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNum = val;
      // if (this.isSearch) {
      //   this.searchFn();
      // } else {
        this.getBrand();
      // }
    },
    edit(row) {
      // console.log('修改', row)
      this.id = row.id;
      this.addForm.name = row.name;
      this.addForm.number = row.number;
      this.addForm.remark = row.remark;
      this.title = '修改';
      this.showDialog = true;
    },
    async del(row) {
      console.log(111);
      console.log('删除', row);
      const res = await delBrand({ id: row.id });
      console.log(res);
      if (res.code === 200) {
        // 判断当前数据是不是当页最后一条，如果是页码减1
        this.$message.success('删除成功');
        if (this.brandList.length === 1 && this.page.pageNum > 1)
          this.page.pageNum--;
        this.getBrand();
      } else {
        // this.$message.error(res.message);
      }
    },
    close() {
      this.$refs.addFormRef.resetFields();
      this.addForm.number = '';
      this.addForm.name = '';
      this.addForm.remark = '';
      this.id = '';

      this.showDialog = false;
    }
  }
};
</script>

<style scoped lang="scss">

</style>
